<template>
  <div class="login-page mx-auto w-330">
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <validate-input
          placeholder="请输入正确的邮箱地址"
          :rules="emailRules"
          v-model="emailVal"
          ref="inputRef"
          @value="abc"
        ></validate-input>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <validate-input
          placeholder="请输入密码"
          :rules="passwordRules"
          v-model="passwordVal"
          @value="abcs"
        ></validate-input>
      </div>
      <!-- <button type="submit" class="btn btn-primary">Submit</button> -->
      <!-- <template #submit>
          <span class="btn btn-primary btn-block btn-large">登录</span>
      </template> -->
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
// import { useStore } from "vuex";
import store from "@/store";
import { useRouter } from "vue-router";
import ValidateForm from "../components/ValidateForm.vue";
import ValidateInput, { RulesProp } from "../components/ValidateInput.vue";
import createMessage from "@/hooks/createMessage";

export default defineComponent({
  components: {
    ValidateForm,
    ValidateInput,
  },
  setup() {
    const emailVal = ref("111@test.com");
    const router = useRouter()
    // const store = useStore()
    console.log(store);
    
    const emailRules: RulesProp = [
      // 这个是邮箱规则，应该被这个东西约束
      { type: "required", message: "电子邮箱不能为空" }, // 这个是必填项
      { type: "email", message: "请输入一个正确的电子邮箱格式" },
    ];
    const passwordVal = ref("111111");
    const passwordRules: RulesProp = [
      { type: "required", message: "密码不能为空" },
    ];
    const abc = (a:string) => {
      emailVal.value = a
    }
    const abcs = (a:string) => {
      passwordVal.value = a
    }
    
    const onFormSubmit = (result: boolean) => {
      if(result) {
        const payload = {
          email: emailVal.value,
          password: passwordVal.value
        }
        store.dispatch('loginAndFetch', payload).then(() => {
          createMessage('登陆成功 2 秒后跳转到首页', 'success')
          setTimeout(() => {
            router.push('/')
          }, 2000)
        }).catch(e => {
          console.log(e);
        })
      }
    };
    return {
      emailVal,
      emailRules,
      passwordVal,
      passwordRules,
      onFormSubmit,
      abc,
      abcs
    };
  },
});
</script>

<style>
.w-330 {
  max-width: 330px;
}
</style>
